{extend name="layout/layout" /}

{block name="navbar"}{/block}

{block name="style"}
	<style>
		body, .mui-content{
			background: #fff;
		}


		.mui-input-group:before, .mui-input-group:after{
			height: 0;
		}


		form  .mui-input-row label~input{
			font-size: 14px;
		}

		.bank-name{
			padding-right: 20px;
			color:#8f8f94;
		}

		.mask{
			background: rgba(0,0,0,0.4);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 888;
		}

		.mask .mask-container{
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}

		.mask .mask-container .mask-title{
			text-align: center;
			border-bottom: 1px solid #ccc;
			line-height: 40px;
		}

		.mui-btn-theme{
			width: 100%;
			border-radius: 0;
		}

		.mask .mask-list{
			max-height: 300px;
			overflow-y: scroll;
		}


		.logo{
			width: 30px;
			padding-top:6px;
		}

		.select-img{
			width:20px;
		}

		.mask-name{
			padding-left: 15px;
		}

		.select-img{
			padding-top: 11px;
		}
	</style>
{/block}

{block name="main"}
	<div class="login" v-cloak>
		<form class="mui-input-group">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell" @tap="showMask=true">
			        <a class="mui-navigate-right">
			        	收款帐号
			        	<span class="mui-pull-right bank-name">
			        		<span v-if="account_index != null">
			        			{{accounts[account_index]['account_name']}} 【{{accounts[account_index]['name']}}】
			        			<p>{{accounts[account_index]['account_no']}}</p>
			        		</span>
			        		<span v-else>
			        			请选择
			        		</span>
			        	</span>
			        </a>
			    </li>
			</ul>

			<div class="mui-input-row">
				<label>提现金额</label>
				<input type="text" name="amount" v-model="amount"  placeholder="提现金额">
			</div>

			<button class="mui-btn mui-btn-block mui-btn-theme" type="button" @tap="saveForm()">确认提现</button>

		</form>

		<div class="mask" v-if="showMask">
			<div class="mask-container">
				<div class="mask-title">选择收款帐号</div>
				<div class="mask-list">
					<ul class="mui-table-view" v-for="account, aindex in accounts">
					    <li class="mui-table-view-cell" @tap="selectAccount(account,aindex)">
					        <img :src="aindex == account_index?'/assets/img/selected.png':'/assets/img/she.png'" alt="" class="select-img mui-pull-right">
					        <img :src="account.logo_image" alt="" class="logo mui-pull-left">
					    	<div class="mask-name mui-pull-left">
						    	{{account.account_name}} 【{{account.name}}】
						    	<p>{{account.account_no}}</p>
						    </div>
					    </li>
					</ul>
				</div>
				<div class="close mui-btn mui-btn-theme mui-btn-block" @tap="showMask=false">关闭</div>
			</div>
		</div>
	</div>
{/block}

{block name="script"}
	<script>

		var myVue = new Vue({
			el:'.login',
			data:{
				amount: '',
				accounts:[],
				account_index: null,
				showMask:false,
			},
			mounted: function(){
				if(token){
					this.token = token;
					this.getAccounts();
				} else {
					this.login();
				}
			},
			methods: {
				login:function(){
					location.href = '/mobile/user/login';
				},
				getAccounts: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'funds/account';
					var that = this;
					request(that, {'url': url}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.accounts = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				saveForm:function(){
					if(this.account_index == null) {
						mui.toast('请选择收款帐号');
						return;
					}


					if(!this.amount || this.amount <= 0) {
						mui.toast('请填写提现金额');
						return;
					}



					var url =  'funds/withdraw';
					var that = this;
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					request(that, {'url': url, 'data': {
						amount:that.amount, 
						account_id: that.accounts[that.account_index]['id'],
					}}, function(res){
						layer.closeAll();
						mui.toast(res.msg);
						if(res.code == 200) {
							mui.back();
						}	
					});

				},

				//选择银行
				selectAccount: function(item, index){
					console.log(item);
					this.account_index = index;
					item.checked = true;
					this.showMask = false;
				}
			}
		});
	</script>
{/block}